@use '../../shared/_variables';
@use '../../shared/_common';

.ais-ChatHeader {
  display: flex;
  gap: calc(var(--ais-spacing) * 2);
  align-items: center;
  justify-content: space-between;
  padding: var(--ais-spacing);
  border-bottom: 1px solid rgba(var(--ais-border-color-rgb), 0.2);
  color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    height: calc(var(--ais-spacing) - 1px);
    background: linear-gradient(
      to bottom,
      rgba(var(--ais-background-color-rgb), var(--ais-background-color-alpha)),
      transparent
    );
    pointer-events: none;
    z-index: 1;
  }
}

.ais-ChatHeader-title {
  display: flex;
  align-items: center;
  gap: calc(var(--ais-spacing) / 2);
  font-weight: var(--ais-font-weight-semibold);
}

.ais-ChatHeader-titleIcon {
  display: inline-flex;
  align-items: center;
  color: rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));

  svg {
    width: var(--ais-icon-size);
    height: auto;
  }
}

.ais-ChatHeader-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--ais-spacing) / 2);

  svg {
    width: calc(var(--ais-icon-size) * 0.8);
  }
}

.ais-ChatHeader-clear {
  font-size: calc(var(--ais-spacing) * 0.875);
}

@media (max-width: variables.$ais-chat-breakpoint) {
  .ais-ChatHeader-maximize {
    display: none;
  }
}
